<template>
  <div class="p-4">
    <a-card title="CSRF测试" :bordered="false" class="mb-4">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-alert v-if="csrfStatus === 'success'" type="success" message="CSRF保护正常工作！" show-icon />
        <a-alert v-if="csrfStatus === 'failed'" type="error" message="CSRF保护测试失败！" show-icon />
        <a-alert v-if="csrfStatus === 'loading'" type="info" message="正在测试CSRF保护..." show-icon />
        
        <div>
          <a-descriptions title="CSRF令牌信息" bordered>
            <a-descriptions-item label="Cookie中的令牌" span="3">
              {{ csrfCookie || '未找到' }}
            </a-descriptions-item>
            <a-descriptions-item label="最后测试结果" span="3">
              <a-tag :color="csrfResult ? 'success' : 'error'">
                {{ csrfResult ? '成功' : '失败' }}
              </a-tag>
            </a-descriptions-item>
          </a-descriptions>
        </div>
        
        <div class="button-container">
          <!-- 使用内联样式强制设置按钮样式 -->
          <button 
            style="background-color: #1890ff; color: white; border: none; border-radius: 2px; padding: 8px 15px; cursor: pointer; font-size: 14px; min-width: 120px; margin-right: 10px;"
            @click="testCSRFProtection"
            :disabled="loading"
          >
            {{ loading ? '测试中...' : '测试CSRF保护' }}
          </button>
          
          <button 
            style="background-color: #fff; color: #000; border: 1px solid #d9d9d9; border-radius: 2px; padding: 8px 15px; cursor: pointer; font-size: 14px; min-width: 120px;"
            @click="getCsrfToken"
            :disabled="loading"
          >
            {{ loading ? '获取中...' : '获取CSRF令牌' }}
          </button>
        </div>
      </a-space>
    </a-card>
    
    <a-card title="CSRF保护说明" :bordered="false">
      <p>CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种常见的web安全漏洞，攻击者诱导用户执行非本意的操作。</p>
      <p>本系统采用了Token验证的方式防止CSRF攻击：</p>
      <ol class="pl-5 mt-2">
        <li>服务器生成CSRF令牌并存储在Cookie中</li>
        <li>前端从Cookie中读取令牌并在请求头中发送</li>
        <li>服务器验证请求头中的令牌是否与Cookie中的一致</li>
      </ol>
      <p class="mt-2">点击"测试CSRF保护"按钮可以验证CSRF保护是否正常工作。</p>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { testCSRF, getCSRFTokenFromCookie, ensureCSRFToken } from '#/api/request';

const loading = ref(false);
const csrfStatus = ref<'success' | 'failed' | 'loading' | ''>('');
const csrfCookie = ref<string | null>(null);
const csrfResult = ref<boolean>(false);

// 获取CSRF令牌
async function getCsrfToken() {
  loading.value = true;
  try {
    const token = await ensureCSRFToken();
    csrfCookie.value = token;
    if (token) {
      message.success('成功获取CSRF令牌');
    } else {
      message.error('获取CSRF令牌失败');
    }
  } catch (error) {
    console.error('获取CSRF令牌出错:', error);
    message.error('获取CSRF令牌出错');
  } finally {
    loading.value = false;
  }
}

// 测试CSRF保护
async function testCSRFProtection() {
  loading.value = true;
  csrfStatus.value = 'loading';
  try {
    csrfResult.value = await testCSRF();
    csrfStatus.value = csrfResult.value ? 'success' : 'failed';
    
    if (csrfResult.value) {
      message.success('CSRF保护测试成功');
    } else {
      message.error('CSRF保护测试失败');
    }
  } catch (error) {
    console.error('CSRF测试出错:', error);
    csrfStatus.value = 'failed';
    message.error('CSRF测试出错');
  } finally {
    loading.value = false;
  }
}

// 页面加载时获取当前CSRF令牌
onMounted(() => {
  csrfCookie.value = getCSRFTokenFromCookie();
});
</script> 